import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { 
  Form, 
  Input, 
  Button, 
  Card, 
  Switch, 
  Typography, 
  Space, 
  message 
} from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Agent, getAgentById, createAgent, updateAgent } from '@/api/agent';
import './style.less';

const { Title, Text } = Typography;
const { TextArea } = Input;

const AgentEdit: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const isEdit = id !== undefined;
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const [initialValues, setInitialValues] = useState<Agent | null>(null);

  useEffect(() => {
    if (isEdit) {
      fetchAgentData();
    }
  }, [id]);

  const fetchAgentData = async () => {
    try {
      setLoading(true);
      const data = await getAgentById(Number(id));
      setInitialValues(data);
      form.setFieldsValue(data);
    } catch (error) {
      message.error('获取智能体信息失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (values: Agent) => {
    try {
      setLoading(true);
      if (isEdit) {
        await updateAgent(Number(id), values);
        message.success('更新成功');
      } else {
        await createAgent(values);
        message.success('创建成功');
      }
      navigate('/agent');
    } catch (error) {
      message.error(isEdit ? '更新失败' : '创建失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="agent-edit-container">
      <div className="agent-edit-header">
        <Space>
          <Button 
            icon={<ArrowLeftOutlined />} 
            onClick={() => navigate('/agent')}
            style={{ marginRight: 16 }}
          >
            返回
          </Button>
          <Title level={2}>{isEdit ? '编辑智能体' : '创建智能体'}</Title>
        </Space>
      </div>

      <Card className="agent-edit-card">
        <Form
          form={form}
          layout="vertical"
          initialValues={initialValues || { trainable: true }}
          onFinish={handleSubmit}
          disabled={loading}
        >
          <Form.Item
            name="name"
            label="智能体名称"
            rules={[{ required: true, message: '请输入智能体名称' }]}
          >
            <Input placeholder="请输入智能体名称" />
          </Form.Item>

          <Form.Item
            name="systemPrompt"
            label="系统提示词"
            rules={[{ required: true, message: '请输入系统提示词' }]}
          >
            <TextArea
              placeholder="请输入系统提示词"
              autoSize={{ minRows: 6, maxRows: 15 }}
            />
          </Form.Item>

          <Form.Item
            name="trainable"
            label="是否可训练"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={loading}>
                {isEdit ? '更新' : '创建'}
              </Button>
              <Button onClick={() => navigate('/agent')}>取消</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default AgentEdit; 